<template>
  <div class="main">

    <el-table :data="list" v-loading="queryLoading" style="width: 100%;
  height: 79vh;" :default-sort="{ prop: 'date', order: 'descending' }">
      <el-table-column label="ID" prop="id" >
        <template slot-scope="scope">
          <span style="">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="username" align="center">
        <template slot-scope="scope">
          <span style="">{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="密码" prop="password" sortable align="center">
        <template slot-scope="scope">
          <span style="">{{ scope.row.password }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话" prop="phone" align="center">
        <template slot-scope="scope">
          <span style="">{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" prop="sex" sortable align="center">
        <template slot-scope="scope">
          <span style="">{{ scope.row.sex ==="1" ? "男":"女"}}</span>
        </template>
      </el-table-column>
      <el-table-column label="权限" prop="identity" align="center">
        <template slot-scope="scope">
          <span style="">{{ scope.row.identity===1? "管理员":"用户" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" prop="updateTime" sortable align="center" width="190px">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="">{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right" width="150px">
        <template slot="header" slot-scope="">
          <el-input size="medium" placeholder="输入ID搜索" v-model="input" />
        </template>
        <template slot-scope="scope">
          <el-button size="medium" type="primary" @click="handleEdit(scope.$index, scope.row)"
            style="width: 40px;height: 25px;">Edit</el-button>
          <el-button size="medium" type="danger" @click="handleDelete(scope.$index, scope.row)"
            style="width: 40px;height: 25px;">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <userEditView :dialogVisible.sync="dialogVisible" :dialogInfo.sync="dialogInfo"></userEditView>
    <userDeleteView :dialogVisible_delete.sync="dialogVisible_delete" :dialogInfo_delete.sync="dialogInfo_delete"></userDeleteView>
    <el-pagination :total="pagination.total" :current-page.sync="pagination.currentPage"
      :page-size.sync="pagination.PageSize" :page-sizes="[10]" layout="total, sizes, prev, pager, next, jumper"
      @size-change="query()" @current-change="query()" />
  </div>
</template>
<script>
import { METHOD, request } from '@/utils/request'
import userEditView from '../admin/userEditView.vue'
import userDeleteView from '../admin/userDeleteView.vue'
import { Message } from 'element-ui'
// import Axios from 'axios'
export default {
  name: 'userView',
  components: {
    userEditView,
    userDeleteView
  },
  created () {
    this.query()
  },
  watch: {
    dialogInfo: {
      handler (newVal, oldVal) {
        const params = JSON.stringify(newVal)
        console.log(params)
        this.Editquery(params)
        // this.query()
      }
    }
  },
  // updated () {
  //   this.query()
  // },
  computed () {
    console.log(this.input)
  },
  mounted () {
  },
  data () {
    return {
      list: {},
      input: '',
      queryLoading: true, // 查询加载状态
      pagination: {
        // 分页数据
        total: 0, // 记录总数
        currentPage: 1, // 当前页
        PageSize: 10, // 每页的记录条数
        sort: 'updateAt,desc' // 查询排序依据
      },
      dialogVisible: false, // 是否显示edit页面
      dialogVisible_delete: false,
      dialogInfo: {}, // edit信息
      dialogInfo_delete: {} // delete信息
    }
  },
  methods: {
    change () {
      this.$forceUpdate()
    },
    query () {
      this.queryLoading = true
      const params = Object.assign(
        {
          page: this.pagination.currentPage,
          pageSize: this.pagination.PageSize
        })
      request('/api/admin/user/page', METHOD.POST, params).then((resp) => {
        this.list = resp.data.data.records
        this.pagination.total = resp.data.data.total
        this.currentPage = resp.data.data.currentPage
        this.pageSize = resp.data.data.pageSize
        this.queryLoading = false
        console.log(resp.data.data.records)
      })
    },
    Editquery (params) {
      this.queryLoading = true
      request('/api/admin/user', METHOD.PUT, params).then((resp) => {
        if (resp === 200) {
          Message({
            message: '修改成功!',
            type: 'success',
            duration: 5 * 1000
          })
        }
      }).finally(() => { this.queryLoading = false })
      this.$nextTick(() => { this.query() })
    },
    Deletequery (id) {
      this.queryLoading = true
      request('/api/admin/user/delete', METHOD.GET, id).then((resp) => {
        if (resp === 200) {
          Message({
            message: '删除成功!',
            type: 'success',
            duration: 5 * 1000
          })
        }
      }).finally(() => { this.queryLoading = false })
      this.$nextTick(() => { this.query() })
    },
    handleEdit (index, row) {
      this.dialogVisible = true
      this.dialogInfo = row
    },
    handleDelete (index, row) {
      this.dialogVisible_delete = true
      this.dialogInfo_delete = row
    },
    userFind () {
      console.log(this.input)
    }
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

.el-pagination {
  margin-left: 30%;
  width: 200px;
  height: 50px;
}
</style>
